<template>
	<view class="content">
		<uni-swiper-dot :info="info" :current="current" :mode="mode" :dots-styles="dotsStyles" field="content">
			<swiper class="swiper-box" @change="change">
				<swiper-item v-for="(item, index) in info" :key="index">
					<view :class="item.colorClass" class="swiper-item">
						<image class="image" :src="item.url" mode="aspectFill" />
					</view>
				</swiper-item>
			</swiper>
		</uni-swiper-dot>
		
		<glanceProductList 
		    :titletxt="title"
		    @imgclick="imgclick" 
		    :data="courseList" >
		</glanceProductList>
	</view>
</template>

<script>
	import uniSwiperDot from '@/components/uni-swiper-dot/uni-swiper-dot.vue'
	import glanceProductList from '@/components/glance/glance-ProductList.vue'
	export default {
		components: {
			uniSwiperDot,
			glanceProductList
		},
		data() {
			return {
				title: '推荐课程',
				modeIndex: -1,
				styleIndex: -1,
				current: 0,
				mode: 'dot',
				dotsStyles: {},
				info: [{
						colorClass: 'uni-bg-red',
						url: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg',
						content: '内容 A'
					},
					{
						colorClass: 'uni-bg-green',
						url: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/muwu.jpg',
						content: '内容 B'
					},
					{
						colorClass: 'uni-bg-blue',
						url: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/cbd.jpg',
						content: '内容 C'
					}
				],
				
				courseList: [
					{ 
						'src':'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg',
						'imghref':'拉拉的',
						'name':'我饿',
						'shortlabel':'特别好用 严靠的是跨境电商速度快就是的就是看的就是空间都是靠大家选',
						'marketinglabel':'210',
						'oriprice':'120',
						'curprice':'30',
						'iconreviewer':'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg'
					},
					{
						'src':'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg',
						'imghref':'拉拉的',
						'name':'我饿',
						'shortlabel':'特别好用 严选',
						'marketinglabel':'9.9包邮',
						'oriprice':'120',
						'curprice':'30',
						'iconreviewer':'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg'
					},
					{
						'src':'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg',
						'imghref':'拉拉的',
						'name':'我饿',
						'shortlabel':'特别好用 严选',
						'marketinglabel':'9.9包邮',
						'oriprice':'120',
						'curprice':'30',
						'iconreviewer':'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg'
					},
					{
						'src':'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg',
						'imghref':'拉拉的',
						'name':'我饿',
						'shortlabel':'特别好用 严选',
						'marketinglabel':'9.9包邮',
						'oriprice':'120',
						'curprice':'30',
						'iconreviewer':'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg'
					},
					{
						'src':'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg',
						'imghref':'拉拉的',
						'name':'我饿',
						'shortlabel':'特别好用 严选',
						'marketinglabel':'9.9包邮',
						'oriprice':'120',
						'curprice':'30',
						'iconreviewer':'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg'
					},
					{
						'src':'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg',
						'imghref':'拉拉的',
						'name':'我饿',
						'shortlabel':'特别好用 严选',
						'marketinglabel':'9.9包邮',
						'oriprice':'120',
						'curprice':'30',
						'iconreviewer':'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg'
					}
				],
				dotStyle: [{
						backgroundColor: 'rgba(0, 0, 0, .3)',
						border: '1px rgba(0, 0, 0, .3) solid',
						color: '#fff',
						selectedBackgroundColor: 'rgba(0, 0, 0, .9)',
						selectedBorder: '1px rgba(0, 0, 0, .9) solid'
					},
					{
						backgroundColor: 'rgba(255, 90, 95,0.3)',
						border: '1px rgba(255, 90, 95,0.3) solid',
						color: '#fff',
						selectedBackgroundColor: 'rgba(255, 90, 95,0.9)',
						selectedBorder: '1px rgba(255, 90, 95,0.9) solid'
					},
					{
						backgroundColor: 'rgba(83, 200, 249,0.3)',
						border: '1px rgba(83, 200, 249,0.3) solid',
						color: '#fff',
						selectedBackgroundColor: 'rgba(83, 200, 249,0.9)',
						selectedBorder: '1px rgba(83, 200, 249,0.9) solid'
					}
				]
			}
		},
		onLoad() {
          setInterval(this.changeImage, 2000);
		},
		methods: {
			
			changeImage() {
				if (this.current > 3) {
					this.current = 0
				}
				this.current++
			},

            change(e) {
				this.current = e.detail.current
			},
			selectStyle(index) {
				this.dotsStyles = this.dotStyle[index]
				this.styleIndex = index
			},
			selectMode(mode, index) {
				this.mode = mode
				this.modeIndex = index
				this.styleIndex = -1
				this.dotsStyles = this.dotStyle[0]
			}
		}
	}
</script>

<style>
	/* 头条小程序组件内不能引入字体 */
	/* #ifdef MP-TOUTIAO */
	@font-face {
		font-family: uniicons;
		font-weight: normal;
		font-style: normal;
		src: url('~@/static/uni.ttf') format('truetype');
	}
	
	/* #endif */
	
	/* #ifndef APP-NVUE */
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #efeff4;
		min-height: 100%;
		height: auto;
	}
	
	view {
		font-size: 14px;
		line-height: inherit;
	}
	
	.example {
		padding: 0 15px 15px;
	}
	
	.example-info {
		padding: 15px;
		color: #3b4144;
		background: #ffffff;
	}
	
	.example-body {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		padding: 0;
		font-size: 14px;
		background-color: #ffffff;
	}
	
	/* #endif */
	.example {
		padding: 0 15px;
	}
	
	.example-info {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		padding: 15px;
		color: #3b4144;
		background-color: #ffffff;
		font-size: 14px;
		line-height: 20px;
	}
	
	.example-info-text {
		font-size: 14px;
		line-height: 20px;
		color: #3b4144;
	}
	
	
	.example-body {
		flex-direction: column;
		padding: 15px;
		background-color: #ffffff;
	}
	
	.word-btn-white {
		font-size: 18px;
		color: #FFFFFF;
	}
	
	.word-btn {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		border-radius: 6px;
		height: 48px;
		margin: 15px;
		background-color: #007AFF;
	}
	
	.word-btn--hover {
		background-color: #4ca2ff;
	}
	
	
	.swiper-box {
		height: 200px;
	}
	
	.swiper-item {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: #999;
		color: #fff;
	}
	
	.image {
		width: 750rpx;
	}
	
	.uni-bg-red {
		background-color: #ff5a5f;
	}
	
	.uni-bg-green {
		background-color: #09bb07;
	}
	
	.uni-bg-blue {
		background-color: #007aff;
	}
	
	.example-body {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		padding: 20rpx;
	}
	
	.example-body-item {
	
		flex-direction: row;
		justify-content: center;
		align-items: center;
		margin: 15rpx;
		padding: 15rpx;
		height: 60rpx;
		/* #ifndef APP-NVUE */
		display: flex;
		padding: 0 15rpx;
		/* #endif */
		flex: 1;
		border-color: #e5e5e5;
		border-style: solid;
		border-width: 1px;
		border-radius: 5px;
	}
	
	.example-body-item-text {
		font-size: 28rpx;
		color: #333;
	}
	
	.example-body-dots {
		width: 16rpx;
		height: 16rpx;
		border-radius: 50px;
		background-color: #333333;
		margin-left: 10rpx;
	}
	
	.active {
		border-style: solid;
		border-color: #007aff;
		border-width: 1px;
	}
	
</style>
